<template>

    <div class="room_manage container">

        <div class="l_content">

            <div class="l_content_1 ">

                <div class="right">
                    <img src="@/assets/img/icon/room/notice.png" class="icon" alt="icon" />
                    <button class="btn btn_white active">通知</button>
                    <button class="btn btn_white">刷新</button>
                    <button class="btn btn_white">查询</button>

                </div>

            </div>
            <div class="l_content_2">

                <table class="table table-border table_layout">

                    <thead>

                        <tr>

                            <th>手术间</th>

                            <th>时间</th>

                            <th>姓名</th>

                            <th>性别</th>

                            <th>年龄</th>

                            <th>病区</th>

                            <th>床位</th>

                            <th>手术名称</th>

                            <th>术者</th>

                            <th>助手</th>

                            <th>麻醉</th>

                            <th>麻醉者</th>

                            <th>护士</th>

                            <th>急诊</th>

                            <th>感染</th>

                            <th>隔离</th>

                            <th>备注</th>

                            <th>病人记录</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr v-for="(item, index) in infoGetAllList" :key="item.id" :class="index=='0'?'active':''">

                            <td>2702</td>

                            <td :class="item.state">10:00</td>

                            <td>欧阳安俊</td>

                            <td>男</td>

                            <td>88岁</td>

                            <td>四区</td>

                            <td>04</td>

                            <td>左眼白内障超声化抽手术</td>

                            <td>何妙春</td>

                            <td>全麻</td>

                            <td>顾安然/顾安然</td>

                            <td>玛丽/玛丽</td>

                            <td></td>

                            <td></td>

                            <td></td>

                            <td></td>

                            <td></td>


                            <td>
                                <img src="@/assets/img/icon/room/record.png" class="icon" alt="icon" />
                            </td>

                        </tr>



                    </tbody>
                    <tfoot>

                    </tfoot>

                </table>

            </div>


        </div>



    </div>

</template>

<script lang="ts">
    import {
        Component,
        Vue
    } from 'vue-property-decorator';

    import { State, Action, Getter } from 'vuex-class';

    const namespace: string = 'room';

    @Component({

        components: {



        },

    })

    export default class Home extends Vue {

        @Action('infoGetAllAction', { namespace }) infoGetAll: any;
	    @Getter('infoGetAll', { namespace }) "infoGetAllList": string;

        mounted() {
            // console.log()
            // console.log(this.status)
            this.infoGetAll();
            
        } 

        roomData = [{
                state: 'wait'
            },
            {
                state: 'danger'
            },
            {
                state: 'warning'
            },
            {
                state: 'wait'
            },
        ]
    }
</script>

<style lang="scss" scpoed>
    .room_manage {
        .l_content {
            width: 100%;
            text-align: left;
            overflow: hidden;
            float: left;
            @include bolder;

            .l_content_1 {
                padding: 0.2rem;
                overflow: hidden;

                .right {
                    img {
                        width: 30px;
                        margin-right: 20px;
                    }

                    .btn {
                        margin-right: 30px;

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }

            }

            .l_content_2 {

                margin-top: 0.2rem;

                .table {
                    th{
                        &:first-child{
                            border-left:0;
                        }
                    }
                    tr {
                        padding: 5px;
                        border:0;

                        td {
                            padding: 5px;

                            img {
                                width: 20px;
                            }
                            &:first-child{
                                border-left:0;
                            }
                            &:last-child{
                                border-right:0;
                            }
                            
                        }

                        &.active {
                            background: $themecolor;
                            color: $color;
                        }
                        &:last-child{
                            td{
                                border-bottom:0;
                            }
                           
                        }
                    }

                }
            }
        }

    }
</style>